<template>
  <section class="goods-header">
    <view class="goods-swiper" :style="[goodsSwiperCss]">
		
      <swiper
        class="swiper"
        :autoplay="false"
        :touchable="true"
        :height="375"
        @change="swiperChange"
      >
        <swiper-item v-for="(item, index) in getPicList" :key="index">
          <video
            id="myVideo"
            class="goods-video"
            :src="item.pic_url"
            v-if="item.type && item.type == 'video'"
            @error="videoErrorCallback"
            controls
          ></video>
          <image
            v-else
            :src="item.pic_url"
            alt=""
            mode="aspectFill"
            @click="previewPics(index)"
          ></image>
        </swiper-item>
      </swiper>
      <view class="swiper-length" v-if="getPicList.length"
        >{{ swiperIndex + "/" + getPicList.length }}
      </view>

      <view
        class="rebate"
        v-if="goodsInfo.rebate && propsData.params.showFenxiao"
      >
        <i class="iconfont icon-consumption-fill"></i>
        <view> 分销最高可赚 ¥{{ goodsInfo.rebate }} </view>
      </view>
    </view>
  </section>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    goodsInfo: {
      type: Object,
      default: {}
    }
  },

  mixins: [diySysPageMixin], //混入文件
  data() {
    return {
      swiperIndex: 1,

      activeTab: 0
    };
  },
  mounted() {},
  watch: {
    topTabActiveIndex(val) {
      this.activeTab = val;
    }
  },
  computed: {
    getPicList() {
      let { goodsInfo } = this;

      if (goodsInfo && goodsInfo.pic_list && goodsInfo.pic_list.length) {
        // #ifdef APP-PLUS
        return goodsInfo.pic_list.filter((el) => el.type !== "video");
        // #endif

        // #ifndef APP-PLUS
        return goodsInfo.pic_list;
        // #endif
      }
      return [];
    },

    goodsSwiperCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.params);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      let obj = {
        margin: style.margin
      };
      return obj;
    }
  },
  methods: {
    // 点击预览图片
    previewPics(e) {
      let pics = this.getPicList || [];
      let picArr = [];
      pics.forEach((item) => {
        picArr.push(item.pic_url);
      });
      uni.previewImage({
        current: e,
        urls: picArr,
        success() {
          uni.setStorageSync("usePreviewImgApi", "true");
        }
      });
    },
    swiperChange(e) {
      this.swiperIndex = Number(e.detail.current) + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-header {
  width: 100%;

  .goods-swiper {
    width: 100%;
    height: 750rpx;
    background-color: #fff;
    position: relative;
    swiper {
      width: 100%;
      height: 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .goods-video {
      width: 100%;
      height: 100%;
    }
    .swiper-length {
      padding: 0.3vw 3.73vw;
      position: absolute;
      right: 3.2vw;
      bottom: 4.53vw;
      z-index: 22;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #dddcdd;
      border-radius: 5vw;
    }
  }
}

.rebate {
  position: absolute;
  left: 24rpx;
  bottom: 24rpx;
  display: flex;
  align-items: center;
  padding-right: 20rpx;
  height: 52rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  border: 2rpx solid #f2f2f2;
  font-size: 22rpx;
  color: #f0250e;

  .iconfont {
    position: relative;
    top: -1rpx;
    color: linear-gradient(180deg, #fe4638 0%, #fe6e2b 100%);
    font-size: 50rpx;
  }
}
</style>
